<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="载入新文档" onclick="newDoc()">
        <input type="text" name="" id="" placeholder="刷新让我消失">
        <input type="button" value="刷新" onclick="reload()">
        <input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">
        <input type="button" value="点击跳转本机其他页面" onclick="window.location.href='my-iframe.html'">
        <br> <input type="button" value="上一个页面" onclick="history.back()">
        <input type="button" value="下一个页面" onclick="history.forward()">
    </body>
    <script type="text/javascript">
        /* 
        location对象的属性:
        hash 	  返回一个URL的锚部分
        host 	  返回一个URL的主机名和端口
        hostname 	返回URL的主机名
        href 	   返回完整的URL
        pathname 	返回的URL路径名。
        port 	  返回一个URL服务器使用的端口号
        protocol 	返回一个URL协议
        search 	   返回一个URL的查询部分
        */

        console.log(location.hash);
        console.log(location.host);
        console.log(location.hostname);
        console.log(location.href);
        console.log(location.pathname);
        console.log(location.port);
        console.log(location.protocol);
        console.log(location.search);
        /* 
        location 对象方法
        assign() 	载入一个新的文档, 相当于跳转, 但是还可以返回来;
        reload() 	重新载入当前文档
        replace() 	用新的文档替换当前文档, 相当于你关闭了当前页面, 然后又打开了新的页面
        */
        function newDoc() {
            window.location.assign("http://www.runoob.com")
        }

        function reload() {
            location.reload(true)
        }

        function replaceDoc() {
            window.location.replace("https://www.runoob.com")
        }
        
        
        /* 
        history对应的属性
        length 	返回历史列表中的网址数
        */
        console.log(history.length);
        /*
        History 对象方法
        方法 	说明
        back() 	加载 history 列表中的前一个 URL
        forward() 	加载 history 列表中的下一个 URL
        */
    </script>
</html>
